<!DOCTYPE html>

<script src="">
// 编程式的导航
// vue-router提供了一些列的api实现路由的切换
// 如push(), 参数是一个对象,数据结构如下
{
  path: '', // 完整的路由地址
  name: '', // 路由规则的名称
  params: '', // 路由参数
  query: '', // url参数
}
// 参数也可以是一个字符串, 如果是传字符串, 这个字符串代表路由对应的path
// 如要跳转到首页 this.$router.push({ path: '/home' }), 或 this.$router.push('/home'), 或 this.$router.push({ name: home })
// 这几种方式他的差异??

// 参数的差异,params参数和query参数都会出现在路由地址(url)上,表象形式上看,params参数没有key,出现在/后面, 根据路由规则定义key的顺序来识别参数值对应的key, query参数是以键值对的形式显示,如?key=value&key2=value2的形式, 
// 从定义上来看, params参数需要在路由规则上进行"定义", 而query参数不需要在路由规则上"定义"

// 带参数的传参
// params参数: 如需要跳转到/user/:id/:name的页面,使用this.$router.push({ name: 'user', params: { id: 'xxx', name: 'xxx' } }), **我们需要添加额外参数的时候, 不能使用path, 需要使用name
// query参数: 不需要在路由规则上定义, 获取的方式this.$route.query.xxx

// router.go() 类似 window.history.go(), 用来前进,后退, 参数是数字, 可以是正数或负数, 正数代表前进, 负数代表后退, 如果参数的范围超过了可以跳转的页面的页数, go函数将会失效

// router.replace() 类似location.replace(), replace与push功能相似, 但是replace不会留下历史记录,



// 课堂练习 
// 1 用路由, 路由嵌套的方式实现一个app页面结构, 首页底部菜单为: 首页,用户列表,我的, 点击底部菜单切换内容区域的路由视图,
// 2 添加用户登录注册页面的路由规则, 当首页判断用户缓存不存在的时候跳转到登录页
// 3 登录页实现路由切换来显示登录,注册的表单内容
// 4 登录页通过接口完成登录操作, 登录成功跳转到首页路由
</script>
